<!DOCTYPE html>
<html lang="zh-CN" xmlns:th="http://www.thymeleaf.org"
      xmlns:sec="http://www.thymeleaf.org/thymeleaf-extras-springsecurity5">
<head th:replace="~{segmentation/_right_bottom_header::_header_common(~{::title},~{::link},~{::style})}">
    <meta charset="utf-8">
    <title>用户角色关联列表</title>
    <link>
    <style type="text/css"></style>
</head>
<body>
<div class="layuimini-container" id="userRoleList" value="0">
    <div class="layui-row">
<!--        <div class="layui-col-xs6 layui-col-sm6 layui-col-md6">-->
<!--            <div class="layuimini-main">-->
<!--                <fieldset class="layui-elem-field layuimini-search">-->
<!--                    <legend>搜索信息</legend>-->
<!--                    <div style="margin: 10px 10px 10px 10px">-->
<!--                        <form class="layui-form" id="userRole-user-search-form" action="">-->
<!--                            <div class="layui-form-item">-->
<!--                                <div class="layui-inline">-->
<!--                                    <label class="layui-form-label">帐号</label>-->
<!--                                    <div class="layui-input-inline">-->
<!--                                        <input type="text" name="account" autocomplete="off"-->
<!--                                               placeholder="请输入帐号"-->
<!--                                               class="layui-input">-->
<!--                                    </div>-->
<!--                                </div>-->
<!--                                <div class="layui-inline">-->
<!--                                    <label class="layui-form-label">姓名</label>-->
<!--                                    <div class="layui-input-inline">-->
<!--                                        <input type="text" name="name" autocomplete="off"-->
<!--                                               placeholder="请输入姓名"-->
<!--                                               class="layui-input">-->
<!--                                    </div>-->
<!--                                </div>-->
<!--                                <div class="layui-inline"-->
<!--                                     sec:authorize="hasPermission(#authorization.authentication,'button','SYSTEM_USER_ROLE_LIST_MANAGEMENT')">-->
<!--                                    <a class="layui-btn" lay-submit="" lay-filter="userRole-user-search" title="搜搜">-->
<!--                                        <i class="fa fa-search" aria-hidden="true"></i>-->
<!--                                    </a>-->
<!--                                </div>-->
<!--                            </div>-->
<!--                        </form>-->
<!--                    </div>-->
<!--                </fieldset>-->
<!--                <div class="layui-btn-group" style="height: 38px;">-->
<!--                    <a sec:authorize="hasPermission(#authorization.authentication,'button','SYSTEM_USER_ROLE_LIST_MANAGEMENT:save')"-->
<!--                       class="layui-btn layui-btn-normal userRole-save" title="保存">-->
<!--                        <i class="fa fa-floppy-o" aria-hidden="true"></i>-->
<!--                    </a>-->
<!--                </div>-->
<!--                <table id="userRoleUserTableId" lay-filter="userRoleUserTableFilter"></table>-->
<!--            </div>-->
<!--        </div>-->
<!--        <div class="layui-col-xs6 layui-col-sm6 layui-col-md6">-->
            <div class="layuimini-main">
                <fieldset class="layui-elem-field layuimini-search">
                    <legend>搜索信息</legend>
                    <div style="margin: 10px 10px 10px 10px">
                        <form class="layui-form" id="userRole-role-search-form" action="">
                            <input type="hidden" id="userId" name="userId" th:value="${userId}" />
                            <div class="layui-form-item">
                                <div class="layui-inline">
                                    <label class="layui-form-label">角色名称</label>
                                    <div class="layui-input-inline">
                                        <input type="text" name="roleName" autocomplete="off"
                                               placeholder="请输入角色名称"
                                               class="layui-input">
                                    </div>
                                </div>
                                <div class="layui-inline">
                                    <label class="layui-form-label">角色代码</label>
                                    <div class="layui-input-inline">
                                        <input type="text" name="roleCode" autocomplete="off"
                                               placeholder="请输入角色代码"
                                               class="layui-input">
                                    </div>
                                </div>
                                <div class="layui-inline"
                                     sec:authorize="hasPermission(#authorization.authentication,'button','SYSTEM_USER_LIST_MANAGEMENT:system_user_role_view')">
                                    <a class="layui-btn" lay-submit="" lay-filter="userRole-role-search" title="搜搜">
                                        <i class="fa fa-search" aria-hidden="true"></i>
                                    </a>
                                </div>
                            </div>
                        </form>
                    </div>
                </fieldset>
                <div class="layui-btn-group" style="height: 38px;">
                    <a sec:authorize="hasPermission(#authorization.authentication,'button','SYSTEM_USER_LIST_MANAGEMENT:save')"
                       class="layui-btn layui-btn-normal userRole-save" title="保存">
                        保存
                    </a>
                </div>
                <table id="userRoleRoleTableId" lay-filter="userRoleRoleTableFilter"></table>
            </div>
        </div>
<!--    </div>-->
</div>
<div th:replace="~{segmentation/_tail::_tail_common}"></div>
<script th:inline="javascript">
    /*<![CDATA[*/
    [# sec:authorize="hasPermission(#authorization.authentication,'button','SYSTEM_USER_LIST_MANAGEMENT:system_user_role_view')"]
    layui.use(['form', 'table', 'common'], function () {
        var $ = layui.jquery,
            form = layui.form,
            table = layui.table,
            userId = $("#userId").val(),
            userRoleData = [[${userRoleData}]],
            userRoleRoleTableSelectId = "",
            roleTableId = "userRoleRoleTableId";

        //角色表格数据完成后初始化
        function roleTableInit(res, curr, count) {
            // common.initCheckbokOrRadio(roleTableId, 2);
            if (userRoleData && userRoleData.roleId > 0 && res.data.length > 0) {
                var thisTableData = res.data;
                for (var i = 0; i < thisTableData.length; i++) {
                    if (thisTableData[i].id == userRoleData.roleId) {
                        $('div.layui-unselect.layui-form-radio')[i].click();//单选用这个
                        // $("div[lay-id='" + roleTableId + "'] tr[data-index='" + thisTableData[i].LAY_INDEX + "'] td div.laytable-cell-radio div.layui-form-radio").click();
                        break;
                    }
                }
            }
        }

        //角色表格
        var userRoleRoleTableId = table.render({
            elem: '#' + roleTableId,
            id: roleTableId,
            url: '/system/user/role/find/user/role/role/page/list',
            height: 'full-200',
            // contentType: 'application/json',
            // method: 'post',
            // even: true,
            where:{
                limit: 2147483647
            },
            done: roleTableInit,
            cols: [
                [
                    {type: "radio", width: 50, field: 'id', fixed: "left"},
                    {type: "numbers", width: 50, fixed: "left", title: '序号'},
                    {field: 'roleName', minWidth: 100, title: '角色名称', sort: true},
                    {field: 'roleCode', minWidth: 100, title: '角色代码', sort: true},
                    {field: 'roleLevel', minWidth: 100, title: '角色等级', sort: true},
                ]
            ],
            // initSort: {
            //      sort: "createTime", //排序字段   在接口作为参数字段  field order
            //      order: "desc"
            // },
            sort: true,
            page: false
        });

        // //角色单选事件绑定
        // table.on('radio(userRoleRoleTableFilter)', function (obj) { //注：tool是工具条事件名，test是table原始容器的属性 lay-filter="对应的值"
        //     userRoleRoleTableSelectId = obj.data.id;
        // });

        // 行单击事件( 双击事件为: rowDouble )
        table.on('row(userRoleRoleTableFilter)', function(obj){
            userRoleRoleTableSelectId = obj.data.id;
            // 标注当前点击行的选中状态
            obj.setRowChecked({
                type: 'radio' // radio 单选模式；checkbox 复选模式
            });
        });


        //角色监听搜索操作
        form.on('submit(userRole-role-search)', function (data) {
            //执行搜索重载
            userRoleRoleTableSelectId = "";
            common.tablePageRefresh(roleTableId, data.field);
            return false;//返回false防止重复提交
        });

        [# sec:authorize="hasPermission(#authorization.authentication,'button','SYSTEM_USER_LIST_MANAGEMENT:save')"]
        // 批量保存操作
        $(document).off("click", ".userRole-save");
        $(document).on("click", ".userRole-save", function () {
            layer.confirm('确认保存吗？', {
                icon: 3,
                title: '提示',
                shadeClose: true
            }, function (index) {
                var arr = new Array();
                arr.push(userRoleRoleTableSelectId);
                layer.close(index);
                $.ajax({
                    type: 'POST',
                    url: '/system/user/role/save',
                    data: {
                        userId: userId,
                        roleIdList: arr
                    },
                    dataType: 'json',
                    success: function (data) {
                        if (data.code == Result.SUCCESS) {
                            layer.msg('成功!', {
                                icon: 1,
                                shade: [0.3, '#f5f5f5'],
                                time: 1500
                            }, function () {
                                // $("#userList", window.parent.document).attr('value', 1);
                                // var index = parent.layer.getFrameIndex(window.name);
                                // parent.layer.close(index);
                            });
                        } else {
                            layer.msg(data.msg, {
                                icon: 2,
                                time: 3000
                            });
                        }
                    }, error:function(data) {
                        console.log(data.msg);
                    },
                });
            });
            return;
        });
        [/]
    });
    [/]
    /*]]>*/
</script>
</body>
</html>